<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../assets/lib/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="../assets/lib/validator/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="../assets/lib/toastr/toastr.min.css" />
    <title>JQ的bootstrap的表单校验插件</title>
  </head>
  <body>
    <!-- 定义表单内容 -->
    <!-- 阻止它的默认提交 -->
    <form>
      <div class="form-group">
        <label>Username</label>
        <!-- 表单项必须有name属性 -->
        <input type="text" class="form-control" name="username" />
      </div>
      <div class="form-group">
        <label>Email address</label>
        <!-- 表单项必须有name属性 -->
        <input type="text" class="form-control" name="email" />
      </div>
      <div class="form-group">
        <button type="submit" name="submit" class="btn btn-primary">Submit</button>
      </div>
    </form>
    <!-- 使用步骤 -->
    <!-- 引入jq 和 bootstrap 校验插件的js -->
    <script src="../assets/lib/jquery-3.6.0.min.js"></script>
    <script src="../assets/lib/bootstrap/bootstrap.min.js"></script>
    <script src="../assets/lib/validator/bootstrapValidator.min.js"></script>
    <script src="../assets/lib/toastr/toastr.min.js"></script>
    <script>
      // 别人想要用同样的校验规则 只需要 调用一个test方法就可以了！！！
      function test() {
        return {
          message: "This value is not valid",
          feedbackIcons: {
            valid: "glyphicon glyphicon-ok",
            invalid: "glyphicon glyphicon-remove",
            validating: "glyphicon glyphicon-refresh",
          },
          // fields表示字段的
          fields: {
            // 字段名
            username: {
              message: "用户名验证失败",
              // 校验规则
              validators: {
                // notEmpty 表示用户名不能为空
                notEmpty: {
                  message: "用户名不能为空",
                },
              },
            },
            email: {
              validators: {
                notEmpty: {
                  message: "邮箱地址不能为空",
                },
              },
            },
          },
        }
      }
      $("form")
        .bootstrapValidator(test())
        .on("success.form.bv", function (event) {
          event.preventDefault() // 屏蔽默认事件
          //   它会在校验通过之后触发
          // 校验不通过 则不触发
          //   alert("校验成功")
          //   toastr.info("校验成功") // 普通提示
          //   toastr.success("成功信息") // 成功提示
          //   toastr.warning("警告信息") // 警告提示
          toastr.error("失败信息") // 错误提示
        })
    </script>
    <script>
      toastr.options = {
        // "closeButton": false,
        // "debug": false,
        // "newestOnTop": false,
        // "progressBar": false,
        positionClass: "toast-top-right", // 提示框位置，这里填类名
        // "preventDuplicates": false,
        // "onclick": null,
        showDuration: "300", // 提示框渐显所用时间
        hideDuration: "300", // 提示框隐藏渐隐时间
        timeOut: "2000", // 提示框持续时间
        // "extendedTimeOut": "1000",
        // "showEasing": "swing",
        // "hideEasing": "linear",
        // "showMethod": "fadeIn",
        // "hideMethod": "fadeOut"
      }
    </script>
  </body>
</html>
